<template>
  <div>
    <router-view></router-view>
    <t-tab-bar v-model="value" :split="false">
      <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
        {{ item.label }}
      <template #icon>
        <t-icon :name="item.icon" class="tab-icon"/>
      </template>
    </t-tab-bar-item>
  </t-tab-bar>
</div>
</template>

<script setup>
import router from "@/router";
import { ref, watch } from "vue";

const value = ref("myBooks");
const list = ref([
  { value: 'myBooks', label: '书架', icon: 'home' },
  { value: 'bookStore', label: '书城', icon: 'app' },
  { value: 'myInfo', label: '我的', icon: 'user' },
]);

watch(
  () => value.value,
  (newValue) => {
    console.log("当前值改变为：", newValue);
    router.push({ name: newValue });
  }
);

</script>

<style scoped>
.tab-icon {
  font-size: 16px!important;
}
</style>